<template>
	<!--搜索选择器-->
	<div class="clearfix selt">
		<!-- 品牌 -->
		<div class="type-wrap logo">
			<div class="fl key brand">品牌</div>
			<div class="value logos">
				<ul class="logo-list">
					<li @click="getTrademark(t)" v-for="t in trademarkList" :key="t.tmId">{{ t.tmName }}</li>
					
				</ul>
			</div>
		</div>
		<!-- 品牌 -->

		<!-- 商品属性 -->
		<div class="type-wrap" v-for="a in attrsList" :key="a.attrId">
			<div class="fl key">{{a.attrName}}</div>
			<div class="fl value">
				<ul class="type-list">
					<li v-for="(a1,index) in a.attrValueList" :key="index">
						<a @click="sendAttr(a,a1)">{{ a1 }}</a>
					</li>
					
				</ul>
			</div>
			<div class="fl ext"></div>
		</div>
		
	</div>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		name: 'SearchSelector',
		computed:{
			...mapState({
				attrsList:state => state.search.goods.attrsList,
				trademarkList:state => state.search.goods.trademarkList
			})
		},
		methods:{
			// 获取 品牌
			getTrademark(value){
				this.$emit("saveTrademark",value)
			},
			// 获取 商品属性
			sendAttr(attr,value){
				this.$emit("saveAttr",attr,value)
			}
		}
	}
</script>

<style lang="less" scoped>
	.selt {
		border: 1px solid #ddd;
		margin-bottom: 5px;
		overflow: hidden;

		.logo {
			border-top: 0;
			margin: 0;
			position: relative;
			overflow: hidden;

			.key {
				padding-bottom: 87px !important;
			}
		}

		.type-wrap {
			margin: 0;
			position: relative;
			border-top: 1px solid #ddd;
			overflow: hidden;

			.key {
				width: 100px;
				background: #f1f1f1;
				line-height: 26px;
				text-align: right;
				padding: 10px 10px 0 15px;
				float: left;
			}

			.value {
				overflow: hidden;
				padding: 10px 0 0 15px;
				color: #333;
				margin-left: 120px;
				padding-right: 90px;

				.logo-list {
					li {
						float: left;
						border: 1px solid #e4e4e4;
						margin: -1px -1px 0 0;
						width: 105px;
						height: 52px;
						text-align: center;
						line-height: 52px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-weight: 700;
						color: white;
						background: #e1251b;
						font-size: 14px;
						&:hover{
							background: #b31c14;
							cursor: pointer;
						}
						img {
							max-width: 100%;
							vertical-align: middle;
						}
					}
				}

				.type-list {
					li {
						float: left;
						display: block;
						margin-right: 30px;
						line-height: 26px;

						a {
							text-decoration: none;
							color: #666;
						}
					}
				}
			}

			.ext {
				position: absolute;
				top: 10px;
				right: 10px;

				.sui-btn {
					display: inline-block;
					padding: 2px 14px;
					box-sizing: border-box;
					margin-bottom: 0;
					font-size: 12px;
					line-height: 18px;
					text-align: center;
					vertical-align: middle;
					cursor: pointer;
					padding: 0 10px;
					background: #fff;
					border: 1px solid #d5d5d5;
				}

				a {
					color: #666;
				}
			}
		}
	}
</style>